<template>
  <div class="tx-list-page">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="table.page.current" :page-sizes="[10, 20, 50, 100, 500]" :page-size="table.page.size" layout="total, sizes, prev, pager, next, jumper" :total="table.page.total"></el-pagination>
  </div>
</template>


<script>
export default {
  props: {
    table: {
      type: Object,
      default() {
        return {
          page: {
            current: 1,
            size: 10,
            total: 0,
          },
        };
      }
    }
  },
  data() {
    return {};
  },
  mounted() { },
  methods: {
    handleSizeChange(size) {
      if (this.table.page.size != size) { 
        this.table.page.current = 1;
      }
      this.table.page.size = size;
      this.$emit("change", this.table.page)
    },
    handleCurrentChange(current) {
      this.table.page.current = current;
      this.$emit("change", this.table.page)
    }
  }
};
</script>


<style lang="scss">
.tx-list-page {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  background-color: #f2f2f2;
  margin: 10px 0px 10px 0px;
  padding: 0px 15px 0px 15px;
  .el-pagination {
    height: 28px;
  }
}
</style>


